import { useState } from "react";

import "./index.scss";

import searchIcon from "./hsw-search.png";

export default function HiddenSearchWidget() {
  const [inputVisible, setInputVisible] = useState(false);

  return (
    <div className='hidden-search-widget'>
      <div className={["hsw-box", inputVisible ? "active" : ""].join(" ")}>
        <input placeholder='搜索...' />
        <img
          src={searchIcon}
          alt=''
          onClick={() => setInputVisible(true)}
          style={{ borderRadius: inputVisible ? "0 18px 18px 0" : "18px" }}
        />
      </div>
    </div>
  );
}
